<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教练申请 - 乒乓球培训管理系统</title>

    <!-- Bootstrap 5 CSS -->
    <link href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="{{ url_for('static', filename='vendor/bootstrap-icons/css/bootstrap-icons.css') }}" rel="stylesheet">

<style>
    .register-container {
        max-width: 900px;
        margin: 2rem auto;
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        overflow: hidden;
    }

    .register-header {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        color: white;
        text-align: center;
        padding: 2rem;
    }

    .register-header h2 {
        margin: 0;
        font-weight: 600;
    }

    .register-header p {
        margin: 0.5rem 0 0 0;
        opacity: 0.9;
    }

    .register-form {
        padding: 2rem;
    }

    .form-section {
        margin-bottom: 2rem;
    }

    .section-title {
        color: #2c3e50;
        font-weight: 600;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e9ecef;
        display: flex;
        align-items: center;
    }

    .section-title i {
        margin-right: 0.5rem;
        color: #17a2b8;
    }

    .form-label {
        font-weight: 500;
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }

    .required-field::after {
        content: '*';
        color: #dc3545;
        margin-left: 3px;
    }

    .form-control, .form-select {
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
    }

    .form-control:focus, .form-select:focus {
        border-color: #17a2b8;
        box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
    }

    textarea.form-control {
        resize: vertical;
        min-height: 100px;
    }

    .btn-register {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        border: none;
        padding: 0.75rem 2rem;
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .btn-register:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(23, 162, 184, 0.4);
    }

    .login-link {
        text-align: center;
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e9ecef;
    }

    .login-link a {
        color: #17a2b8;
        text-decoration: none;
        font-weight: 500;
    }

    .login-link a:hover {
        text-decoration: underline;
    }

    .password-strength {
        font-size: 0.875rem;
        margin-top: 0.25rem;
        color: #6c757d;
    }

    .level-info {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }

    .photo-preview {
        max-width: 150px;
        max-height: 150px;
        margin-top: 0.5rem;
        border-radius: 8px;
        display: none;
    }

    .invalid-feedback {
        display: block;
    }

    .alert-info {
        background-color: #d1ecf1;
        border-color: #bee5eb;
        color: #0c5460;
        border-radius: 8px;
        margin-bottom: 2rem;
    }
</style>
</head>
<body>

<div class="container-fluid">
    <div class="register-container">
        <!-- 注册头部 -->
        <div class="register-header">
            <h2><i class="bi bi-person-check me-2"></i>教练申请</h2>
            <p>成为我们的教练团队一员，分享您的乒乓球技艺与热情</p>
        </div>

        <!-- Flash消息显示 -->
        {% include 'components/alerts.html' %}

        <div class="register-form">
            <!-- 申请说明 -->
            <div class="alert alert-info">
                <h6><i class="bi bi-info-circle me-2"></i>申请说明</h6>
                <p class="mb-0">提交申请后，校区管理员将审核您的资料。审核通过后，您将收到通知并可以登录使用系统。请确保填写的信息真实有效。</p>
            </div>

            <form method="POST" enctype="multipart/form-data" novalidate>
                {{ form.hidden_tag() }}

                <!-- 基本信息 -->
                <div class="form-section">
                    <h4 class="section-title">
                        <i class="bi bi-person-circle"></i>基本信息
                    </h4>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.username.id }}" class="form-label required-field">{{ form.username.label.text }}</label>
                            {{ form.username(class="form-control" + (" is-invalid" if form.username.errors else "")) }}
                            {% if form.username.errors %}
                                <div class="invalid-feedback">
                                    {% for error in form.username.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="{{ form.real_name.id }}" class="form-label required-field">{{ form.real_name.label.text }}</label>
                            {{ form.real_name(class="form-control" + (" is-invalid" if form.real_name.errors else "")) }}
                            {% if form.real_name.errors %}
                                <div class="invalid-feedback">
                                    {% for error in form.real_name.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.password.id }}" class="form-label required-field">{{ form.password.label.text }}</label>
                            {{ form.password(class="form-control" + (" is-invalid" if form.password.errors else "")) }}
                            <div class="password-strength">密码必须包含字母和数字</div>
                            {% if form.password.errors %}
                                <div class="invalid-feedback">
                                    {% for error in form.password.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="{{ form.confirm_password.id }}" class="form-label required-field">{{ form.confirm_password.label.text }}</label>
                            {{ form.confirm_password(class="form-control" + (" is-invalid" if form.confirm_password.errors else "")) }}
                            {% if form.confirm_password.errors %}
                                <div class="invalid-feedback">
                                    {% for error in form.confirm_password.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- 联系信息 -->
                <div class="form-section">
                    <h4 class="section-title">
                        <i class="bi bi-telephone"></i>联系信息
                    </h4>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.phone.id }}" class="form-label required-field">{{ form.phone.label.text }}</label>
                            {{ form.phone(class="form-control" + (" is-invalid" if form.phone.errors else "")) }}
                            {% if form.phone.errors %}
                                <div class="invalid-feedback">
                                    {% for error in form.phone.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="{{ form.email.id }}" class="form-label">{{ form.email.label.text }}</label>
                            {{ form.email(class="form-control" + (" is-invalid" if form.email.errors else "")) }}
                            {% if form.email.errors %}
                                <div class="invalid-feedback">
                                    {% for error in form.email.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- 个人信息 -->
                <div class="form-section">
                    <h4 class="section-title">
                        <i class="bi bi-info-circle"></i>个人信息
                    </h4>

                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label for="{{ form.gender.id }}" class="form-label">{{ form.gender.label.text }}</label>
                            {{ form.gender(class="form-select" + (" is-invalid" if form.gender.errors else "")) }}
                            {% if form.gender.errors %}
                                <div class="invalid-feedback">
                                    {% for error in form.gender.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <div class="col-md-3 mb-3">
                            <label for="{{ form.age.id }}" class="form-label">{{ form.age.label.text }}</label>
                            {{ form.age(class="form-control" + (" is-invalid" if form.age.errors else "")) }}
                            {% if form.age.errors %}
                                <div class="invalid-feedback">
                                    {% for error in form.age.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="{{ form.photo.id }}" class="form-label">{{ form.photo.label.text }}</label>
                            {{ form.photo(class="form-control" + (" is-invalid" if form.photo.errors else ""), accept="image/*") }}
                            <img id="photoPreview" class="photo-preview" alt="照片预览">
                            {% if form.photo.errors %}
                                <div class="invalid-feedback">
                                    {% for error in form.photo.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- 应聘信息 -->
                <div class="form-section">
                    <h4 class="section-title">
                        <i class="bi bi-award"></i>应聘信息
                    </h4>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.campus_id.id }}" class="form-label required-field">{{ form.campus_id.label.text }}</label>
                            {{ form.campus_id(class="form-select" + (" is-invalid" if form.campus_id.errors else "")) }}
                            {% if form.campus_id.errors %}
                                <div class="invalid-feedback">
                                    {% for error in form.campus_id.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="{{ form.coach_level.id }}" class="form-label required-field">{{ form.coach_level.label.text }}</label>
                            {{ form.coach_level(class="form-select" + (" is-invalid" if form.coach_level.errors else "")) }}
                            <div class="level-info">请根据您的教学经验和技能水平选择合适的级别</div>
                            {% if form.coach_level.errors %}
                                <div class="invalid-feedback">
                                    {% for error in form.coach_level.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12 mb-3">
                            <label for="{{ form.bio.id }}" class="form-label required-field">{{ form.bio.label.text }}</label>
                            {{ form.bio(class="form-control" + (" is-invalid" if form.bio.errors else ""), rows="4") }}
                            {% if form.bio.errors %}
                                <div class="invalid-feedback">
                                    {% for error in form.bio.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12 mb-3">
                            <label for="{{ form.experience.id }}" class="form-label required-field">{{ form.experience.label.text }}</label>
                            {{ form.experience(class="form-control" + (" is-invalid" if form.experience.errors else ""), rows="6") }}
                            {% if form.experience.errors %}
                                <div class="invalid-feedback">
                                    {% for error in form.experience.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="d-grid">
                    {{ form.submit(class="btn btn-info btn-register") }}
                </div>
            </form>

            <!-- 登录链接 -->
            <div class="login-link">
                <p>已有账号？<a href="{{ url_for('auth.login') }}">立即登录</a></p>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 自动聚焦到用户名输入框
    const usernameInput = document.getElementById('username');
    if (usernameInput) {
        usernameInput.focus();
    }

    // 表单提交时显示加载状态
    document.querySelector('form').addEventListener('submit', function() {
        const submitBtn = document.querySelector('.btn-register');
        const originalText = submitBtn.textContent;
        submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>提交申请中...';
        submitBtn.disabled = true;

        // 如果表单验证失败，恢复按钮状态
        setTimeout(function() {
            if (document.querySelector('.is-invalid')) {
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            }
        }, 100);
    });

    // 密码强度检查
    const passwordInput = document.getElementById('password');
    if (passwordInput) {
        passwordInput.addEventListener('input', function() {
            const password = this.value;
            const strengthDiv = this.nextElementSibling;

            if (password.length === 0) {
                strengthDiv.textContent = '密码必须包含字母和数字';
                strengthDiv.className = 'password-strength';
            } else if (password.length < 8) {
                strengthDiv.textContent = '密码长度至少8位';
                strengthDiv.className = 'password-strength text-warning';
            } else if (!/[a-zA-Z]/.test(password) || !/\d/.test(password)) {
                strengthDiv.textContent = '密码必须包含字母和数字';
                strengthDiv.className = 'password-strength text-warning';
            } else {
                strengthDiv.textContent = '密码强度良好';
                strengthDiv.className = 'password-strength text-success';
            }
        });
    }

    // 照片预览
    const photoInput = document.getElementById('photo');
    const photoPreview = document.getElementById('photoPreview');

    if (photoInput && photoPreview) {
        photoInput.addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    photoPreview.src = e.target.result;
                    photoPreview.style.display = 'block';
                };
                reader.readAsDataURL(file);
            } else {
                photoPreview.style.display = 'none';
            }
        });
    }

    // 文本域字符计数
    const textareas = document.querySelectorAll('textarea');
    textareas.forEach(function(textarea) {
        const updateCount = function() {
            const current = textarea.value.length;
            const max = textarea.getAttribute('maxlength') || 1000;
            let countDiv = textarea.parentNode.querySelector('.char-count');

            if (!countDiv) {
                countDiv = document.createElement('div');
                countDiv.className = 'char-count text-muted';
                countDiv.style.fontSize = '0.875rem';
                countDiv.style.textAlign = 'right';
                textarea.parentNode.appendChild(countDiv);
            }

            countDiv.textContent = `${current}/${max}`;

            if (current > max * 0.9) {
                countDiv.className = 'char-count text-warning';
            } else {
                countDiv.className = 'char-count text-muted';
            }
        };

        textarea.addEventListener('input', updateCount);
        updateCount(); // 初始化计数
    });
});
</script>

</body>
</html>